<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" data-th-replace="~{public::layui}">
        <style>
            .layui-form .btns {
                text-align: center;
            }
            body {
                padding-top: 20px;
                padding-right: 10px;
            }
            body {
                width: calc(100% - 10px);
                height: calc(100vh - 20px);
                display: flex;
                align-items: center;
                justify-content: center;
            }
        </style>
    </head>
    <body>
        <form class="layui-form" >
            <input type="hidden" name="id" data-th-value="${account.id}">
            <div class="layui-form-item">
                <div class="layui-form-label">账号:</div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="userName" data-th-value="${account.userName}" lay-verify="required" readonly >
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-form-label">角色:</div>
                <div class="layui-input-inline">
                    <input type="checkbox" data-th-name="|roleId[${role.id}]|" data-th-each="role : ${roles}"
                           data-th-value="${role.id}" data-th-title="${role.name}"
                           data-th-checked="${roleMappings.containsKey(role.id)}">
                </div>
            </div>
            <div class="layui-form-item btns">
                <button class="layui-btn-normal layui-btn "  lay-submit lay-filter="role-mapping-form"><i class="layui-icon layui-icon-link"></i>关联</button>
            </div>
        </form>
        <script data-th-replace="~{public::js('account','账号','roleMapping')}"></script>
    </body>
</html>